import loadingUrl from "@/assets/loading.svg";
import styles from "./loading.module.less";
//这个自定义指令可以给绑定的元素添加一个加载组件
// 得到el中loading效果的img元素
function getLoadingImage(el) {
  return el.querySelector("img[data-role=loading]");
}

function createLoadingImg() {
  const img = document.createElement("img");
  img.dataset.role = "loading";
  //设置 data-role 属性
  img.src = loadingUrl;
  //设置 src 属性
  img.className = styles.loading;
  //设置 CSS 类名
  //居中样式
  return img;
}
// 如果 binding.value 是真值（例如
// ，一个布尔值 true，一个字符串，
// 或者其他非空值），那么 createL
// oadingImg 函数被调用，从而创建
// 并附加一个新的 <img> 元素。如
// 果 binding.value 为假（即，
// 它 evaluate 
// 为 false，例如：null, undefined
// , 0, false, 空字符串等），则移除现有的 <img> 元素。
// 导出指令的配置对象
export default function(el, binding) {
  // 根据 binding.value 的值，决定创建或删除img元素
  const curImg = getLoadingImage(el);
  //如果没找到，那就创造一个
  if (binding.value) {
    if (!curImg) {
      const img = createLoadingImg();
      el.appendChild(img);
      //然后添加到子元素中
    }
  } else {
    //如果是false，并且里面有。就移除
    if (curImg) {
      curImg.remove();
    }
  }
}
